<template>
	<view class="work-container">

		<view class="list">
			<view class="item">
				<view class="item-element">
					<image src="@/static/index/rk.png" mode="" class="img"></image>

					<view class="vw">
						入库
					</view>
				</view>
			</view>
			<view class="item" @click="stock">
				<view class="item-element">
					<image src="../static/index/ck.png" mode="" class="img"></image>
					<view class="vw">
						出库
					</view>
				</view>
			</view>
			<view class="item" @click="tzxx">
				<view class="item-element">
					<image src="../static/index/tzxx.png" mode="" class="img"></image>
					<view class="vw">
						台账信息
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-element">
					<image src="../static/index/tl.png" mode="" class="img"></image>
					<view class="vw">
						退料
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-element">
					<image src="../static/index/wlxg.png" mode="" class="img"></image>
					<view class="vw">
						物料修改
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-element">
					<image src="../static/index/pd.png" mode="" class="img"></image>
					<view class="vw">
						盘点
					</view>
				</view>
			</view>
		</view>

		<!-- 底部弹出层 -->
		<u-popup :show="show" mode="bottom" @close="close" :round="10">
			<span style="margin: 20rpx auto;font-size: 16px;font-weight: 700;">选择出库方式</span>
			<view @click="tray" class="tray">
				<text style="font-size: 32rpx;">托盘出库</text>
				<u-icon name="arrow-right" color="#7c7c7f" size="20"></u-icon>
			</view>
			<view @click="subassembly" class="tray">
				<text style="font-size: 32rpx;">组件出库</text>
				<u-icon name="arrow-right" color="#7c7c7f" size="20"></u-icon>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		onLoad() {

		},
		created() {
			this.show = false
		},
		methods: {
			stock() {
				this.show = true
			},
			// 托盘出库
			tray() {
				uni.navigateTo({
					url: '/pages/stockRemoval/tray/index'
				})
				this.show = false
			},
			// 组件出库
			subassembly() {
				uni.navigateTo({
					url: '/pages/stockRemoval/subassembly/index'
				})
				this.show = false
			},
			// 台账信息
			tzxx() {
				// uni.navigateTo({
				// 	url: '/pages/tzxx/tzxx/index'
				// })
			},
			// 关闭弹出层
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style>
	.list {
		// 设置父元素成为弹性盒
		display: flex;
		// 让弹性盒元素在必要的时候拆行
		flex-wrap: wrap;
		padding: 30rpx;
		padding-left: 34rpx;


	}

	.item {
		margin: 0 26rpx 26rpx 0;
		width: calc((100% - 60rpx) / 2);
		/* width: 328rpx; */
		height: 328rpx;
		opacity: 1;
		border-radius: 40rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 4rpx 8rpx 0px rgba(30, 36, 54, 0.1);


	}

	.item-element {
		opacity: 1;
		border-radius: 40rpx;
		text-align: center;
		margin-top: 66rpx;


	}

	.img {
		width: 128rpx;
		height: 128rpx;
		margin-bottom: 20rpx;
	}

	.vw {
		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 37.5rpx;
		color: rgba(30, 36, 54, 1);
		text-align: center;
	}

	.tray {
		display: flex;
		justify-content: space-between;
		margin: 40rpx 0;
		height: 60rpx;
		padding-left: 20rpx;
		line-height: 60rpx;
	}
</style>